<template>
	<view class="page-body">
		<scroll-view class="nav-top" scroll-x="true" :scroll-left="'width:'+width+'px'">
			<view class="nav-top-item">
				<view @click="orderStatusClickMain(orderTab,index)" v-for="(item,index) in ordertatusList" :key="index" :class="index==orderStatusActive?'active':''">{{item.NAME}}</view><!-- ?'orderStatusActive':'' -->
			</view>
		</scroll-view>
		<view  class="orderInfo"  v-for="(item,index) in ordersListData" :key="index"  @click="goOrderDetails(index)"><!-- v-show="index==orderStatusActive" //v-if="item.goods.length > 0" -->
			<view class="orderInfo_row" >
				 <view class="">订单序列号：{{item.orderNo}}</view>
				 <view class="order_status " v-text="isOrderStatus(item.orderStatus)[0]"></view>
			</view>
			<view class="orderInfo_middle"  v-for="gitem in item.goods" :key="gitem.id" >
				<view class="orderInfo_left"> 
					<image :src="gitem.goodImg" class="order_img" mode="aspectFit" ></image>
				</view>
				<view class="orderInfo_right">
				   <view class="order_right_row">
					  <text class="leftfloat">{{gitem.goodName}}</text>
					  <text class="rightfloat">{{gitem.sellingPrice}}</text>
				   </view>
				   
				   <view class="order_right_row">
					  <text class="leftfloat">{{gitem.num}}</text>
					  <text class="order_count rightfloat">{{item.goods.length}}</text>
				   </view>
				   <view>
					 <text class="order_text1">{{gitem.num}}</text>
				   </view>
				</view>
			</view>
			<view class="btnView">
			  <view class="btnLeft" v-show="isOrderStatus(item.orderStatus)[2]" v-text="isOrderStatus(item.orderStatus)[2]" @click.stop="checkLeftBtn(index)"></view>
			  <view class="btnRight" v-text="isOrderStatus(item.orderStatus)[1]" @click.stop="checkRightBtn(index) " ></view>
			</view>
			
		</view>
			
			<view v-if="ordersListData.length >= 4">
				<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
			</view> 
			<!-- 取消订单弹窗 -->
			<view class="cancelOrder">
				<popupCancel id="cancelOrder" :show="type === 'cancel'" position="bottom" mode="fixed"  @hidePopup="canceltogglePopup('')"></popupCancel>
			</view>
			<!-- 删除订单弹窗 -->
			<view class="deleteOrder">
				<popupDelete :show="type === 'delete'" position="middle" mode="fixed"  @hidePopup="deletetogglePopup('')"></popupDelete>
			</view>
			<!-- 提醒发货弹窗 -->
			<view class="shipmentsOrder">
				<popupShipments :show="type === 'shipments'" position="middle" mode="fixed"  @hidePopup="shipmentstogglePopup('')" ></popupShipments>
			</view>
			<!-- 退货原因弹窗 -->
			<view class="goods_return">
				<popupGoods :show="type === 'goods'" position="bottom" mode="fixed"  @hidePopup="goodstogglePopup('')"></popupGoods>
			</view>
			<!-- 退款原因弹窗 -->
			<view class="money_return">
				<popupMoney :show="type === 'money'" position="bottom" mode="fixed"  @hidePopup="moneytogglePopup('')"></popupMoney>
			</view>
		</view>
	</view>
</template>

<script>
	import popupCancel from '@/components/uni-popupCancel/uni-popupCancel.vue'
	import popupDelete from '@/components/uni-popupDelete/uni-popupDelete.vue'
	import popupShipments from '@/components/uni-popupShipments/uni-popupShipments.vue'
	import popupGoods from '@/components/uni-popupGoods/uni-popupGoods.vue'
	import popupMoney from '@/components/uni-popupMoney/uni-popupMoney.vue'
	import uniLoadMore from '@/components/uni-load-more.vue' 
	var page = 1;
	var listLen = 0;

	export default {
		components: {
			popupCancel,
			popupDelete,
			popupShipments,
			popupGoods,
			popupMoney, 
			uniLoadMore
		},
		data() {
			return {
				ordertatusList: [{"NAME":"全部订单"},{"NAME":"待付款"},{"NAME":"待发货"},{"NAME":"待收货"}],//,{"NAME":"待评价"},{"NAME":"已完成"}
				ordersListData: [],
				statusArr:['','obligation','shipments','receiving','afterSale'],
				tabLists:[[],[],[],[]],
				strArr:[
					["待支付","支付","取消订单"],["待发货","提醒发货"],
					["待收货","确认收货","订单追踪"],["处理中","查看详情"],
					["退货成功","查看详情"],["退款成功","查看详情"],
					["交易完成","查看详情","删除"],["交易关闭","查看详情","删除"]
				],
				height: 0,
				width: 0,
				orderStatusActive: 0,
				scrollTop: 0,
				scrollHeight: 0,
				type: '',
				oStatus: '',
				loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
					contentdown:'上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
		
			}
		},
		onLoad(option){
			console.log(this.orderStatusActive);
			if(option.index == null){
				option.index = 0;
			}
			this.oStatus = this.statusArr[option.index];
			this.orderStatusActive = option.index;
			this.getOrderListData(this.oStatus);
		},
		//下拉刷新
		onPullDownRefresh: function(){
			this.getOrderListData(this.oStatus);
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0,
			})
		},
		//上拉加载更多
		onReachBottom() {
			//触底的时候请求数据，即为上拉加载更多
			if(this.ordersListData.length > listLen ){
				this.getMoreOrderListData(this.oStatus);
				listLen += 4;
				console.log("listLen :" + listLen);
			}else{
				this.loadingType = 2;
			}

		},
		methods: {
			// 跳转订单详情
			goOrderDetails(index){
				console.log(this.ordersListData[index]);
				uni.navigateTo({
					url: '../orderDetails/orderDetails?orderInfo='+JSON.stringify(this.ordersListData[index])
				})
			},
			//订单选项切换
			orderStatusClickMain(orderTab,index) {
				let that = this;
				listLen = 0;
				this.orderStatusActive = index;
				uni.showLoading({
						title: '拼命加载中',
						mask: true
					});
				//我的订单选项
				if(that.orderStatusActive == '0'){
					that.oStatus = '';
					uni.request({
						url: this.$store.state.URL + 'user/user/user_order',
						data:{
							token: this.$store.state.token,
							orderStatus: that.oStatus,
							page: 1,
							pagesize: page * 4,
							merchantID:this.$store.state.merchantDefaultID
						},
						success(res) {
							uni.hideLoading();
							if(res.data.data.order.data.length == 0){
								uni.showToast({
									title: '暂无订单',
									mask: false,
									duration: 1800
								});
							}
							that.ordersListData = res.data.data.order.data;
							that.tabLists[index].push(that.ordersListData);
						}
					})
				}
				// 待支付选项
				if(that.orderStatusActive == '1'){
					that.oStatus = that.statusArr[index];
					uni.request({
						url: this.$store.state.URL + 'user/user/user_order',
						data:{
							token: this.$store.state.token,//'8cw7N6EIrQV9JaXZtMHT',
							orderStatus: that.oStatus,//statusArr[index],//this.oStatus,//'afterSale' 
							page: 1,
							pagesize: page * 4,
							merchantID:this.$store.state.merchantDefaultID
						},
						success(res) {
							uni.hideLoading();
							if(res.data.data.order.data.length == 0){
								uni.showToast({
									title: '暂无订单',
									mask: false,
									duration: 1800
								});
							}
							that.ordersListData = res.data.data.order.data;
							that.tabLists[index].push(that.ordersListData);
						}
					})
				}
				// 待发货选项
				if(that.orderStatusActive == '2'){
					that.oStatus = that.statusArr[index];
					uni.request({
						url: this.$store.state.URL + 'user/user/user_order',
						data:{
							token: this.$store.state.token,
							orderStatus: that.oStatus,
							page: 1,
							pagesize: page * 4,
							merchantID:this.$store.state.merchantDefaultID
						},
						success(res) {
							uni.hideLoading();
							if(res.data.data.order.data.length == 0){
								uni.showToast({
									title: '暂无待发货订单',
									mask: true,
									duration: 1800,
								});
							}
							that.ordersListData = res.data.data.order.data;
							that.tabLists[index].push(that.ordersListData);
						}
					})
				}
				// 待收货选项
				if(that.orderStatusActive == '3'){
					that.oStatus = that.statusArr[index];
					uni.request({
						url: this.$store.state.URL + 'user/user/user_order',
						data:{
							token: this.$store.state.token,
							orderStatus: that.oStatus,
							page: 1,
							pagesize: page * 4,
							merchantID:this.$store.state.merchantDefaultID
						},
						success(res) {
							uni.hideLoading();
							if(res.data.data.order.data.length == 0){
								uni.showToast({
									title: '暂无待收货订单',
									mask: false,
									duration: 1800
								});
							}
							that.ordersListData = res.data.data.order.data;
							that.tabLists[index].push(that.ordersListData);
						}
					})
				}	
			},
			//订单按钮左
			checkLeftBtn(index){
				let that = this;
				let tts = this.$store.state;
				console.log(this.ordersListData[index].orderStatus);
				var statusStr = this.ordersListData[index].orderStatus;
				var orderId = this.ordersListData[index].id.toString();
				let listData = this.ordersListData;
				//取消订单
				if(statusStr == 'obligation'){
					uni.showModal({
						content: '是否取消订单',
						success: res => {
							if(res.confirm){
								uni.showLoading({
									title: '拼命加载中',
									mask: false
								});
								uni.request({
									url: tts.URL + '/order/order/cancel_order',
									data:{
										token: tts.token,
										order_id: orderId,
									},
									success(res) {
										console.log(res.data);
										uni.request({
											url: tts.URL + 'user/user/user_order',
											data:{
												token: tts.token,
												orderStatus: that.oStatus,
												page: 1,
												pagesize: page * 4,
												merchantID:that.$store.state.merchantDefaultID
											},
											success(res) {
												that.ordersListData = res.data.data.order.data;
												uni.hideLoading();
												uni.showToast({
													title: '取消成功',
													mask: false,
													duration: 1500
												});
											},
										})			
									}
								})
							}else{
								console.log("用户点击取消")
							}
						},
					});
				}
				//订单跟踪
				if(statusStr == 'receiving'){
					uni.navigateTo({
						url: "../orderTrack/orderTrack?orderInfoID=" + orderId,
					})
				}
				//删除订单
				if(statusStr == 'success' || statusStr == 'cancel'){
					uni.showModal({
						content: '您是否要删除此次订单',
						success: res => {
							if(res.confirm){
								uni.showLoading({
									title: '拼命加载中',
									mask: false
								});
								uni.request({
									url: this.$store.state.URL + '/order/order/user_delete_order',
									data: {
										token: this.$store.state.token,
										order_id: orderId,
									},
									success(res) {
										console.log("删除订单" + orderId);
										console.log(res.data);
										uni.request({
											url: that.$store.state.URL + 'user/user/user_order',
											data:{
												token:that.$store.state.token,
												orderStatus: that.oStatus,
												page: 1,
												pagesize: page * 4,
												merchantID:that.$store.state.merchantDefaultID,
											},
											success(res) {
												that.ordersListData = res.data.data.order.data;
												uni.hideLoading();
												that.type = 'delete';
											}
										})
										setTimeout(function(){
											that.type = '';
										},2000);
									}
								 })
							}else{
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			//订单按钮右
			checkRightBtn(index){
				let that = this;
				let tss = this.$store.state;
				console.log(this.ordersListData[index].orderStatus);
				var statusStr = this.ordersListData[index].orderStatus;
				var orderNo = this.ordersListData[index].orderNo; 
				var orderId = this.ordersListData[index].id;
				console.log("orderNo:" + orderNo)
				//订单支付
				if(statusStr == 'obligation'){
					//数据加载提示框
					uni.showLoading({
						title: '跳转支付中',
						mask: true
					});
					uni.request({
						 url: tss.URL + '/order/order/order_continue_pay',
						 data:{
							 token: this.$store.state.token,
							 orderNo: orderNo,
						 },
						 header:{
							 'Content-Type': 'json',
						 },
						 method:"POST",
						 success(res) {
							let payment = res.data.data.data;
							let timeStamp = payment.timeStamp.toString();
							console.log("payment"+payment);
							 uni.hideLoading();
							 uni.requestPayment({
								provider: 'wxpay',
								timeStamp: timeStamp,
								nonceStr: payment.nonceStr,
								package: payment.package,
								signType: payment.signType,
								paySign: payment.paySign,
								success: function (res) {
									uni.showToast({
										title:"支付成功",
										duration:1000,
										icon:"none",
										mask:true
									});
									console.log('success:' + JSON.stringify(res));
									uni.request({
										url: this.$store.state.URL + '/user/user/user_order',
										data:{
											token: this.$store.state.token,
											orderStatus: this.oStatus,
											page: 1,
											pagesize: page * 4,
											merchantID:this.$store.state.merchantDefaultID
										},
										success: (res) => {
											that.ordersListData = res.data.data.order.data;
											console.log("that.ordersListData " + that.ordersListData )
										}
									});
								},
								fail: function (err) {
									uni.showToast({
										title:"支付失败",
										duration:1000,
										icon:"none",
										mask:true
									})
									console.log('fail:' + JSON.stringify(err));
									uni.request({
										url: tss.URL + '/user/user/user_order',
										data:{
											token: tss.token,
											orderStatus: that.oStatus,
											page: 1,
											pagesize: page * 4,
											merchantID:tss.merchantDefaultID
										},
										success(res) {
											that.ordersListData = res.data.data.order.data;
										},
										fail() {
											console("Fail in myOrder.vue's line 264");
										}
									})
								},
							});
						},
						fail(res) {
							console.log(res);
						}
					})
				}
				// 订单提醒发货
				if(statusStr == 'shipments'){
					uni.showModal({
						content: '是否提醒商家发货',
						success: function (res) {
							if (res.confirm) {
								uni.request({
									url: that.$store.state.URL + '/order/order/remind_the_delivery',
									data:{
										token: that.$store.state.token,
										order_id: that.ordersListData[index].id,
									},
									success(res) {
										console.log(res.data);	
									}
								})
								that.type = statusStr;
								setTimeout(function(){
									that.type = '';
								},1500);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				// 确认收货
				if(statusStr == 'receiving'){
					uni.request({
					 	url: this.$store.state.URL + '/order/order/take_delivery',
						data: {
							token: this.$store.state.token,
							order_id: orderId,
						},
						success(res) {
							console.log("确认收货" + orderId);
							console.log(res.data);
							uni.request({
								url: that.$store.state.URL + 'user/user/user_order',
								data:{
									token:that.$store.state.token,
									orderStatus: that.oStatus,
									page: 1,
									pagesize: page * 4,
									merchantID:that.$store.state.merchantDefaultID
								},
								success(res) {
									that.ordersListData = res.data.data.order.data;
								}
							})
						}
					 })
				}
				//查看详情
				if(statusStr == 'afterSale' || statusStr == 'success' || statusStr == 'cancel' || statusStr == 'returnSuccess' || statusStr == 'refundSuccess' ){
					 // uni.request({
					 // 	url: this.$store.state.URL + '/order/order/user_delete_order',
						// data: {
						// 	token: this.$store.state.token,
						// 	order_id: orderId,
						// },
						// success(res) {
						// 	console.log("删除订单" + orderId);
						// 	console.log(res.data);
						// 	that.type = 'delete';
						// 	setTimeout(function(){
						// 		that.type = '';
						// 		uni.request({
						// 		url: that.$store.state.URL + 'user/user/user_order',
						// 		data:{
						// 			token:that.$store.state.token,
						// 			orderStatus: that.oStatus,
						// 			page: 1,
						// 			pagesize: page * 4,
						// 		},
						// 		success(res) {
						// 			that.ordersListData = res.data.data.order.data;
						// 		}
						// 	})
						// 	},1500);
						// }
					 // })
					this.goOrderDetails(index);
				}
			},
			//获取订单列表
			getOrderListData(oStatus){
				let that = this;
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				uni.showLoading({
					title: '拼命加载中',
					mask: false
				});
				that.loadingType = 0;
				uni.request({
					url: this.$store.state.URL + 'user/user/user_order',
					data:{
						token: this.$store.state.token,
						orderStatus: this.oStatus,
						page: 1,
						pagesize: page * 4,
						merchantID:this.$store.state.merchantDefaultID
					},
					success(res) {
						if (res.data.data.order.data == null) {//没有数据
							that.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						that.ordersListData = res.data.data.order.data;
						if(that.ordersListData.length == 0){
							uni.hideLoading();
							uni.showToast({
								title: '暂无订单',
								mask: false,
								duration: 1800
							});
						}else{
							console.log(that.ordersListData);
							console.log(page);
							uni.hideLoading();
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						}
					},
					fail(e) {
						console.log(e);
					}
				})
			},
			//加载更多数据
			getMoreOrderListData(oStatus){
				let that = this;
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				uni.showLoading({
					title: '拼命加载中',
					mask: false
				});
				that.loadingType = 0;
				uni.request({
					url: this.$store.state.URL + 'user/user/user_order',
					data:{
						token: this.$store.state.token,
						orderStatus: this.oStatus,
						page: page,
						pagesize: 4,
						merchantID:this.$store.state.merchantDefaultID
					},
					success(res) {
						console.log("loadMoreOrder = " + res)
						if (res.data.data.order.data == null) {//没有数据
							that.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						that.ordersListData = that.ordersListData.concat(res.data.data.order.data);
						page++;
						uni.hideLoading();
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					},
					fail(e) {
						console.log(e);
					}
				})
			},
			// 弹窗
			//start
			canceltogglePopup(type) {  //取消订单弹窗
				this.type = type;
			},
			deletetogglePopup(type) {  //删除订单弹窗
				this.type = type;
			},
			shipmentstogglePopup(type) { //提醒发货弹窗
				this.type = type;
			},
			goodstogglePopup(type) { //退货原因弹窗
				this.type = type;
			},
			moneytogglePopup(type) { //退款原因弹窗
				this.type = type;
			},
			onBackPress() {
				if (this.type !== '') {
					this.type = '';
					return true;
				}
			},
			// 订单状态（obligation-待支付；shipments-待发货；receiving-待收货；afterSale-售后；returnSuccess-退货成功；refundSuccess-退款成功；success-交易完成；cancel-交易关闭；）
			isOrderStatus(ordersStatus){
				if(ordersStatus=='obligation'){	
					return this.strArr[0];
				}else if(ordersStatus=='shipments'){
					//var arr = this.strArr[1];
					return this.strArr[1];
				}
				else if(ordersStatus=='receiving'){
					return this.strArr[2];
				}
				else if(ordersStatus=='afterSale'){
					return this.strArr[3];
				}
				else if(ordersStatus=='returnSuccess'){
					return this.strArr[4];
				}
				else if(ordersStatus=='refundSuccess'){
					//return '退款成功';
					return this.strArr[5];
				}
				else if(ordersStatus=='success'){
					return this.strArr[6];
				}
				else if(ordersStatus=='cancel'){
					return this.strArr[7];
				}//else{ 
				// 	return '状态不存在';
				// }
			}
			// end
		}
	}
</script>

<style>
.page-body{
	color: #B7B7B7;
	background: #F3F3F3;
	height: auto;
}
.leftfloat{
	float: left;
}
.rightfloat{
	float: right;
}
.clean{
	clear: both;
}
.nav-top{
	white-space: nowrap;
	text-align: center;
	border-bottom: 1upx #e8e8e8 solid;
	background:#FFFFFF;
	color:#8d8d8d;
}
.nav-top-item{
    display: flex;
}
.nav-top-item view{
    font-size:30upx;
    padding: 10upx 0;
    margin:0 45upx;
}
.active{
	border-bottom: 2upx solid #F2526F;  
	color: #F2526F;
	border-bottom-width: 5upx;
}
.orderInfo{
	height: auto;
    background: #FFFFFF;
	margin-bottom: 20upx;
}
.orderInfo_row{
	width: 96%;
	height: 60upx;
	line-height: 60upx;
	display: flex;
	justify-content: space-between;
	font-size: 24upx;
	color: #999999;
	margin: 0 2%;
}
.order_status{
	color: #F2526F;
}
.orderInfo_middle{
	display: flex;
	justify-content: flex-start;
}
.orderInfo_left image{
	width: 180upx;
	height: 120upx;
	margin: 10upx 10upx 10upx 20upx;
}
.orderInfo_right{
	width: 68%;
	height: 140upx;
	margin: 0 2%;
	font-size: 30upx;
	color: #333333;
}
.order_right_row{
	display: flex;
	justify-content: space-between;
}
.order_text1{
	color: #B7B7B7;
	font-size: 24upx;
}
.btnView{
	display: flex;
	justify-content: flex-end;
	text-align: center;
	font-size: 24upx;
	background: #FFFFFF;
	border-top: 2upx #e0e0e0 solid;
	padding: 20upx 0;
}
.btnLeft{
  border: 1px solid ;
  border-radius: 20upx;
  width: 120upx;
}
.btnRight{
  border: 1px #F2526F solid ;
  border-radius: 20upx;
  color: #F2526F;
  margin: 0 20upx;
  width: 120upx;
}

</style>
